<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>新增商品信息</h3>
		编号:<input type="text" id="lid"/><br>
		标题:<input type="text" id="title"/><br>
		价格:<input type="text" id="price"/><br>
		<input type="button" value="点击添加一条商品信息" id="btn"/>
		<span id="msg">准备添加中...</span>
		
		<script>
			btn.onclick = function(){
				//获取用户在输入框输入的值
				var i = lid.value
				var t = title.value
				var p = price.value
				var data = `id=${i}&tit=${t}&price=${p}`
				console.log(data)
					
				//AJAX四部曲
				var xhr = new XMLHttpRequest()
				xhr.open('POST','/v2/pro/add')
				//在建立连接之后需要设置请求头信息
				xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=UTF-8')
				xhr.onload = function(){
					console.log(xhr.responseText)
					msg.innerHTML = xhr.responseText
				}
				xhr.send(data)
			}
		</script>
	</body>
</html>
